<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发改局</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- 主内容容器 -->
  <div class="content-wrapper">
    <!-- 容器头标题 -->
    <div class="content-header">
      <div class="container-fluid">

        <div class="row mb-2">

          <div class="col-sm-6">
            <h1 class="m-0">项目总能耗</h1>
          </div>

          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">项目总能耗</li>
            </ol>
          </div>

        </div>

      </div>

    </div>

    <!-- 主题内容正文 -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">

            <div class="card">
              <div class="card-body">


                <!-- 表格顶部企业搜索 -->
                <div class="form-group" style="display: flex;">
                  <label style="padding-top: 2px;">项目搜索</label>

                  <div class="navbar-search-block" style="margin-left: 20px;">
                    <form class="form-inline">
                      <div class="input-group input-group-sm">
                        <input class="form-control form-control-navbar" type="search" placeholder="请输入项目名"
                               aria-label="Search" id="search">
                        <div class="input-group-append" style="margin-left: 10px;">
                          <button class="btn btn-navbar" type="button" onclick="search1()">
                            <i class="fas fa-search"></i>
                          </button>
                          <button class="btn btn-navbar" type="button" data-widget="navbar-search" onclick="clearSearch()">
                            <i class="fas fa-times"></i>
                          </button>

                        </div>
                        <div style="margin-left: 10px;">
                          <button type="button" class="btn btn-primary btn-sm" onclick="search1()">搜索</button>
                          <span style="font-weight:700;color: red;margin-left: 10px;">注: 项目总能耗只有产品月能耗记录包含今年和去年的记录才能统计,建议今年和去年月能耗记录满1年!</span>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>


                <table id="example2" class="table table-bordered table-hover" style="text-align: center;">
                  <thead style="font-size: 10px;">
                  <tr>
                    <th>企业名称</th>
                    <th>项目名称</th>
                    <th>产品名称</th>
                    <th>产品年产量(吨)</th>
                    <th>产品销售收入(万元)</th>
                    <th>产品总能耗(吨标煤)</th>
                    <th>产品单位产品能耗(吨标煤/吨)</th>
                    <th>产品能耗强度(吨标煤/万元)</th>
                    <th>项目总能耗(吨标准煤)</th>
                    <th>能耗替代量(万吨标准煤)</th>
                    <th>十三五入统能耗
                      <br>(万吨标准煤)2020年全年
                    </th>
                    <th>十四五新增能耗
                      <br>(万吨标准煤)预计2021年全年
                    </th>
                  </tr>
                  </thead>
                  <tbody>

                  </tbody>
                  <tfoot>
                  <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
  </aside>

  <!-- 版权信息 -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2021 <a href="http://www.chengzhouyun.com/" target="_blank">ChengZhouYun</a>.</strong> All
    rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0
    </div>
  </footer>

</div>

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard3.js"></script>
</body>

<!-- DataTables  & Plugins -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="../../plugins/jszip/jszip.min.js"></script>
<script src="../../plugins/pdfmake/pdfmake.min.js"></script>
<script src="../../plugins/pdfmake/vfs_fonts.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

<script>
  // 表格变量
  var table;
  // 金钱格式化
  function number_format(number, decimals, dec_point, thousands_sep) {
    /*
    * 参数说明：
    * number：要格式化的数字
    * decimals：保留几位小数
    * dec_point：小数点符号
    * thousands_sep：千分位符号
    * */
    number = (number + '').replace(/[^0-9+-Ee.]/g, '');
    var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
              var k = Math.pow(10, prec);
              return '' + Math.ceil(n * k) / k;
            };

    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    var re = /(-?\d+)(\d{3})/;
    while (re.test(s[0])) {
      s[0] = s[0].replace(re, "$1" + sep + "$2");
    }

    if ((s[1] || '').length < prec) {
      s[1] = s[1] || '';
      s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
  }

  // 表格搜索
  function search1()
  {
    table.ajax.reload();
  }

  // 搜索框清除内容
  function clearSearch() {
    $('#search').val('');
  }

  $(document).ready(function () {


    // 表格数据展示配置  相关信息可以查看http://datatables.club/
    table = $('#example2').DataTable({
      dom: 'Bfrtip',
      processing : true,
      // 开启服务器端分页
      serverSide : true,
      sort: false,
      searchable: true,
      autoWidth: true,
      ajax:{
        type:"get",
        url:'/statis/statistic',
        dataSrc: 'data',
        data: function (param) {
          var search = $('#search').val();
          //添加参数传给服务器
          param.search = search;
          return param;
        }

      },
      // 渲染提高性能
      deferRender: true,
      footerCallback: function(tfoot, data, start, end, display) {

        var yearYieldSum = 0;
        var yearSalesIncomeSum = 0;
        var enTotalSum = 0;
        var productEnSum = 0;
        var enStrengthSum = 0;
        var projectTotalEnergyconsumptionSum = 0;
        var energyconsumptionReplacementSum = 0;
        var tenThreeFiveEnergyconsumptionSum = 0;
        var tenFourFiveEnergyconsumptionSum = 0;

        // 循环遍历数据进行合计计算
        for(var i =0; i< data.length; i++) {

          yearYieldSum += data[i].yearYield;
          yearSalesIncomeSum += data[i].yearSalesIncome;
          enTotalSum += data[i].enTotal;
          productEnSum += data[i].product_en;
          enStrengthSum += data[i].en_strength;
          projectTotalEnergyconsumptionSum += data[i].projectTotalEnergyconsumption;
          energyconsumptionReplacementSum += data[i].energyconsumptionReplacement;
          tenThreeFiveEnergyconsumptionSum += data[i].tenThreeFiveEnergyconsumption;
          tenFourFiveEnergyconsumptionSum += data[i].tenFourFiveEnergyconsumption;

        }
        // 表格底部填充计算数据
        $(tfoot).find('th').eq(0).html("合计");
        $(tfoot).find('th').eq(3).html(number_format(yearYieldSum,2,".",","));
        $(tfoot).find('th').eq(4).html(number_format(yearSalesIncomeSum,2,".",","));
        $(tfoot).find('th').eq(5).html(number_format(enTotalSum,2,".",","));
        $(tfoot).find('th').eq(6).html(number_format(productEnSum,2,".",","));
        $(tfoot).find('th').eq(7).html(number_format(enStrengthSum,2,".",","));
        $(tfoot).find('th').eq(8).html(number_format(projectTotalEnergyconsumptionSum,2,".",","));
        $(tfoot).find('th').eq(9).html(number_format(energyconsumptionReplacementSum,2,".",","));
        $(tfoot).find('th').eq(10).html(number_format(tenThreeFiveEnergyconsumptionSum,2,".",","));
        $(tfoot).find('th').eq(11).html(number_format(tenFourFiveEnergyconsumptionSum,2,".",","));

      },
      columns:[
        // {data:"id",visible:false},
        {data:"enName"},
        {data:"projectName"},
        {data:"productName"},
        {data:"yearYield"},
        {data:"yearSalesIncome"},
        {data:"enTotal"},
        {data:"product_en"},
        {data:"en_strength"},
        {data:"projectTotalEnergyconsumption"},
        {data:"energyconsumptionReplacement"},
        {data:"tenThreeFiveEnergyconsumption"},
        {data:"tenFourFiveEnergyconsumption"},
      ],

      // 显示语言
      "language": {
        zeroRecords:"没有匹配结果",
        emptyTable:"没有匹配结果",
        infoEmpty:"无符合条件记录",
        info: "显示第 _START_ 至 _END_ 条结果，共_TOTAL_条记录",
        lengthMenu: "每页显示 _MENU_ 条记录",
        paginate: {"first": "首页 ", "last": "末页", "next": "下一页", "previous": "上一页"}
      },

      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": true,
      "responsive": true,
    });


    // 移除搜索框的右边隐藏样式
    $('#search').removeClass("form-control-navbar")
  });
</script>

</html>

</html>

</html>
